<template>
  <div class="main_box">
    <CommonHeader title="详情"></CommonHeader>
    <div class="info_box">
      <div class="info_head">
        <div class="tit">{{ info.functionName }}</div>
      </div>
      <div class="info_item">
        <div class="left">
          <div class="person">{{ info.employName }}</div>
          <div class="time">{{ formateDate(info.gmtCreate) }}</div>
        </div>
        <div class="status" :class="info.feedbackStatus == '0'?'red':'green'">{{ formateStatus(info.feedbackStatus) }}</div>
      </div>
      <div class="info_remark">
        <div class="tit">意见内容</div>
        <div class="content">{{ info.content }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import CommonHeader from '@/components/commonHeader'
export default {
  // eslint-disable-next-line
  name: 'AskHelp',
  components: {
    CommonHeader
  },
  data(){
    return{
      info:{}
    }
  },
  computed:{
    formateDate(){
      return function(datetime){
        if(datetime){
          const date = datetime.slice(0,10)
          const time = datetime.slice(11,19)
          return date + '  ' + time
        }else{
          return ''
        }
      }
    },
    formateStatus(){
      return function(status){
        if(status == 0){
          return '待处理'
        }else{
          return '已处理'
        }
      }
    }
  },
  created(){
    const query = this.$route.query
    this.info = query
  },
  methods: {

  },
}
</script>

<style scoped>
.main_box{
    min-height: 100vh;
    background-color: #f4f5fa;
}
.info_box{
  width: calc(100% - 30px);
  background-color: #fff;
  text-align: left;
  margin:15px;
  border-radius:5px;
  padding:10px;
  font-size:14px;
  color:#333;
  box-sizing: border-box;
}
.info_head{
  font-weight: bold;
  font-size:15px;
  margin-bottom: 10px;
  border-left:4px solid #367FFF;
  padding-left:10px;
}
.info_item{
  display: flex;
  justify-content: space-between;
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
}
.info_item .left{
  display: flex;
}
.info_item .time{
  color:#999;
  margin-left: 20px;
}
.info_item .status.red{
  color:#e43c26;
}
.info_item .status.green{
  color:#5bc55a;
}
.info_remark .content{
  width: 100%;
  background-color: #f4f5f6;
  padding:10px;
  color:#666;
  margin-top:10px;
  box-sizing: border-box;
}
</style>